import React from 'react';
import { Form, Input, InputNumber, Select, Button, Radio } from 'antd';
import { ruleP, nameMaxLength, nameMinLength,remarkMaxLength } from '@/utils/rule';
// import ChoosePerson from '@/components/BindPerson/ChoosePerson';
import { connect } from 'dva';

@Form.create({ name: 'BasicInformation' })
@connect(
  state => ({
    loadingqueryDbNameList: state.loading.effects['databaseGroup/queryDbNameList'],
    loadingqueryList: state.loading.effects['databaseGroup/queryList'],
    dataqueryDbNameList: state.databaseGroup.dataqueryDbNameList,
    dataqueryList: state.databaseGroup.dataqueryList,
  }),
  dispatch => ({
    queryDbNameList: e => dispatch({ type: 'databaseGroup/queryDbNameList', payload: e }),
    queryList: e => dispatch({ type: 'databaseGroup/queryList', payload: e }),
  })
)
export default class BasicInformation extends React.Component {
  static defaultProps = { text: {} };
  state = {
    personData: {},
    groupMember: [],
  };
  componentDidMount() {
    this.props.getInstance(this);
    this.props.queryList();
    this.props.queryDbNameList();
  }
  render() {   
    return (
      <>
        <Form labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
          <Form.Item label="数据库组名">
            {this.props.form.getFieldDecorator('groupName', {
              rules: [
                { required: true, whitespace: true, message: '数据库组名不能为空' },
                {min: nameMinLength()[0], message: nameMinLength()[1] },
                { max: nameMaxLength()[0], message: nameMaxLength()[1] },               
              ],
              initialValue: this.props.text.groupName,
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="数据库组管理员">
            {this.props.form.getFieldDecorator('adminUserCode', {  
              rules:[
                { required: true, message: '请选择数据库组管理员' },
              ],          
              initialValue:
                this.props.text.adminUserCode && this.props.text.adminUserCode.split(','),
            })(
              <Select              
                placeholder="请选择"
                style={{ width: '100%' }}
                loading={this.props.loadingqueryList}
              >
                {this.props.dataqueryList.map(v => {
                  return (
                    <Option key={v.userId} value={v.userCode}>
                      {v.userCode}/{v.userName}
                    </Option>
                  );
                })}
              </Select>
            )}
          </Form.Item>
          <Form.Item label="数据库">
            {this.props.form.getFieldDecorator('dbIds', {
              initialValue: this.props.text.dbIdList,
            })(
              <Select
                mode="multiple"
                placeholder="请选择"
                style={{ width: '100%' }}
                loading={this.props.loadingqueryDbNameList}
              >
                {this.props.dataqueryDbNameList.map(v => {
                  return (
                    <Option key={v.dbId} value={v.dbId}>
                      {v.dbName}
                    </Option>
                  );
                })}
              </Select>
            )}
          </Form.Item>

          <Form.Item
            label="状态"
            style={{ display: Object.keys(this.props.text).length ? 'block' : 'none' }}
          >
            {this.props.form.getFieldDecorator('status', { initialValue: this.props.text.status })(
              <Radio.Group>
                <Radio value={0}>启用</Radio>
                <Radio value={1}>禁用</Radio>
              </Radio.Group>
            )}
          </Form.Item>

          <Form.Item label="备注">
            {this.props.form.getFieldDecorator('remark', {
              rules: [{ max: remarkMaxLength()[0], message: remarkMaxLength()[1] }],
              initialValue: this.props.text.remark,
            })(<Input.TextArea style={{ minHeight: 32 }} rows={2} />)}
          </Form.Item>
        </Form>   
      </>
    );
  }
}
